<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			#wrap {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			#hld {
				position: absolute;
				width: 100%;
				top: 20%;
				left: 0;
				z-index: 2;
				text-align: center;
			}
			
			#daojishi {
				position: absolute;
				width: 40%;
				top: 0;
				left: 0;
			}
			
			#daojishi1 {
				width: 100%;
				height: 100%;
			}
			
			#timer {
				position: absolute;
				/*width: 100%;
				height: 100%;*/
				top: 40%;
				left: 45%;
			}
			
			#timer p {
				text-align: center;
			}
			
			#timer p>span {
				color: white;
				font-size: 60px;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<canvas id="mycanvas">你的破浏览器不支持canvas</canvas>
			<div id="hld">
				<img src="img/hld_1.png" id="hld1" />;
			</div>
			<div id="daojishi">
				<img src="img/timer.png" id="daojishi1" />
				<div id="timer">
					<p>
						<span id="second">
							30
						</span>
						<span>:</span>
						<span id="millisecond">
							00
						</span>
					</p>
				</div>
			</div>
		</div>
	</body>
	<script src="js/loadimage.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//游戏的倒计时
		var daojishi = document.getElementById("daojishi");
		var second = document.getElementById('second');
		var millisecond = document.getElementById('millisecond');
		//设置30000毫秒的时间,每10毫秒减少一个数
		var time = 3000;
		setTimeout(function() {
			var timer = setInterval(function() {
				time--;
				second.innerHTML = parseInt(time / 100);
				millisecond.innerHTML = time % 100;
				if(time <= 0) {
					clearInterval(timer);
					//设置时间,30s游戏结束之后要显示结果,跳转到新的页面
					window.location.href = "car/Customs clearance.html";
				}
			}, 10);
		}, 4000)
		
		
		//代码设置canvas的宽高
		var canvas = document.getElementById('mycanvas');
		var ctx = canvas.getContext('2d');
		//获取浏览器宽度
		var windowWidth = document.documentElement.clientWidth;
		var windowHeight = document.documentElement.clientHeight;
		canvas.width = windowWidth;
		canvas.height = windowHeight;

		loadImage({
				//这个json里面写的是图片的信息
				"bg": "img/saidao.png",
				"car": "img/car.png",
				"BtnLeft": "img/btn_left.png",
				"BtnRight": "img/btn_right.png",
				"startLine": "img/startLine.png",
				"speedAdd": "img/speedAdd.png",
				"speedRed": "img/speedRed.png",
				"carSpeed": "img/car_speed.png",
				"barrier": "img/barrier.png",
				"barrier_car":"img/barrier.png"
			}, {
				//这个里面写的是回调函数信息
				"complete": complete
			})
			//使用回调函数,目的是让图片都加载完成的时候再使其起作用

		var car = {};
		var bgY = 0;
		var speed = 0;
		function rand(min, max) {
			return parseInt(Math.random() * (max - min + 1)) + min;
		}
		function complete(imgObj) {
			//下面是绘制赛道的代码
			var bgImg = imgObj.bg;
			//function drawBG 是绘制赛道的函数,每当向下滚动一张的时候,让其高度恢复到初始值0
			function drawBg() {
				bgY += speed;
				ctx.drawImage(bgImg, 0, 0, bgImg.width, bgImg.height, 0, bgY, canvas.width, canvas.height);
				ctx.drawImage(bgImg, 0, 0, bgImg.width, bgImg.height, 0, bgY - canvas.height, canvas.width, canvas.height);
				if(bgY >= canvas.height) {
					bgY = 0;
				}
			}
			//接下来是绘制car的代码
			var carImg = imgObj.car;
			var btnLeftImg = imgObj.BtnLeft;
			var btnRightImg = imgObj.BtnRight;
			var startLineImg = imgObj.startLine;
			var speedAddImg = imgObj.speedAdd;
			var speedRedImg = imgObj.speedRed;
			var carSpeedImg = imgObj.carSpeed;
			var barrierImg = imgObj.barrier;
			var barrierCarImg = imgObj.barrier_car;
			car = {
				img: carImg,
				x: canvas.width / 2 - 80,
				y: canvas.height - 600,
				width: carImg.width,
				height: carImg.height
			}
			carSpeed = {
				img: carSpeedImg,
				x: canvas.width / 2 - 80,
				y: canvas.height - 600,
				width: carImg.width,
				height: carImg.height
			}
			btnLeft = {
				img: btnLeftImg,
				x: canvas.width * (1 / 6),
				y: canvas.height * (0.75),
				width: btnLeftImg.width * 2,
				height: btnLeftImg.height * 2
			}
			btnRight = {
				img: btnRightImg,
				x: canvas.width * (0.6),
				y: canvas.height * (0.75),
				width: btnRightImg.width * 2,
				height: btnRightImg.height * 2
			}
			startLine = {
					img: startLineImg,
					x: canvas.width * 0.1,
					y: canvas.width,
					width: startLineImg.width,
					height: startLineImg.height
				}
				//加速对象
			speedAdd = {
				img: speedAddImg,
				x: canvas.width * 0.85,
				y: canvas.height * 0.65,
				width: speedAddImg.width,
				height: speedAddImg.height
			}
			speedRed = {
				img: speedRedImg,
				x: canvas.width * 0.85,
				y: canvas.height * 0.65,
				width: speedRedImg.width,
				height: speedRedImg.height
			}
			//障碍物车和障碍物的对象
			var windowX = document.documentElement.clientWidth;
			var windowY = document.documentElement.clientHeight;
			function barrier() {
				this.img = imgObj.barrier;
				this.width = this.img.width;
				this.height = this.img.height;
				this.y = -this.height;
				this.x = rand(windowX * 0.08, windowX * 0.76);
			}
			function barrierCar() {
				this.img = imgObj.barrier_car;
				this.width = this.img.width;
				this.height = this.img.height;
				this.y = -this.height;
				this.x = rand(windowX * 0.08, windowX * 0.76);
			}
			
			
			
			var startLineY = 0;
			function drawStartLine() {
				startLineY += speed;
				ctx.beginPath();
				ctx.drawImage(startLineImg, 0, 0, startLine.width, startLine.height, startLine.x, startLine.y + startLineY, canvas.width * 0.8, startLine.height * 2);
			}
			//绘制汽车的函数
			function drawCar() {
				ctx.beginPath();
				ctx.drawImage(carImg, 0, 0, car.width, car.height, car.x, car.y, car.width * 1.5, car.height * 1.5);
			}

			function drawCarSpeed() {
				ctx.beginPath();
				ctx.drawImage(carSpeedImg, 0, 0, car.width, car.height, car.x, car.y, car.width * 1.5, car.height * 1.5);
			}

			//绘制左键右键的函数
			function drawBtnLeft() {
				ctx.beginPath();
				ctx.drawImage(btnLeftImg, 0, 0, btnLeft.width, btnLeft.height, btnLeft.x, btnLeft.y, btnLeft.width * 1.5, btnLeft.height * 1.5);
			}

			function drawBtnRight() {
				ctx.beginPath();
				ctx.drawImage(btnRightImg, 0, 0, btnRight.width, btnRight.height, btnRight.x, btnRight.y, btnRight.width * 1.5, btnRight.height * 1.5);
			}
			//绘制加速器的函数(SpeedAdd  = SpeedRed = )
			function drawSpeedAdd() {
				ctx.beginPath();
				ctx.drawImage(speedAddImg, 0, 0, speedAdd.width, speedAdd.height, speedAdd.x, speedAdd.y, speedAdd.width * 1.3, speedAdd.height * 1.3);
			}

			function drawSpeedRed() {
				ctx.beginPath();
				ctx.drawImage(speedRedImg, 0, 0, speedRed.width, speedRed.height, speedRed.x, speedRed.y, speedRed.width * 1.3, speedRed.height * 1.3);
			}
			//添加一个定时器使游戏进行
			setTimeout(function() {
				speed = 10;
				start = true;
			}, 4000);
			//绘制画面的函数
			//count 是计数器,计算画面绘制的次数,该次数可以计算障碍物出现的频率
			var count = 0;
			function run() {
				count++;
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				//绘制每一帧的画面
				drawBg();
				drawStartLine();
				drawCar();
				drawBtnLeft();
				drawBtnRight();
				//carState 正常状态为false,加速状态为true
				if(carState) {
					drawSpeedRed();
					drawCarSpeed();
					if (start) {
						speed = 20;
					}
				} else {
					drawSpeedAdd();
					drawCar();
					if (start) {
						speed = 10;
					}
				}
				window.requestAnimationFrame(run);
			}
			run();
		}
		//控制小车左右移动
		var carState = false;
		//游戏是否开始,开始true,未开始false
		var start = false;
		canvas.addEventListener("touchstart", function() {
			var touchX = event.touches[0].clientX;
			var touchY = event.touches[0].clientY;
			//判断手指放在什么位置
			//左键边界
			var lleft_bol = touchX > btnLeft.x;
			var lright_bol = touchX < btnLeft.x + btnLeft.width;
			var ltop_bol = touchY > btnLeft.y;
			var lbottom_bol = touchY < btnLeft.y + btnLeft.height;
			//右键边界
			var rleft_bol = touchX > btnRight.x;
			var rright_bol = touchX < btnRight.x + btnRight.width;
			var rtop_bol = touchY > btnRight.y;
			var rbottom_bol = touchY < btnRight.y + btnRight.height;
			//平移速度
			var changeX = 5;
			
			var body = document.querySelector('body');
			var screenWidth = body.offsetWidth;
			var minX = screenWidth * 0.08;
			var maxX = screenWidth * 0.76;
			if(lleft_bol && lright_bol && ltop_bol && lbottom_bol) {
				var left_timer = setInterval(function() {
					car.x = car.x - changeX;
					if (car.x <= minX) {
						car.x = minX;
					};
				}, 15)
				canvas.addEventListener("touchend", function() {
					clearInterval(left_timer);
				})
			}
			if(rleft_bol && rright_bol && rtop_bol && rbottom_bol) {
				var right_timer = setInterval(function() {
					car.x = car.x + changeX;
					if (car.x >= maxX) {
						car.x = maxX;
					}
				}, 15)
				canvas.addEventListener("touchend", function() {
					clearInterval(right_timer);
				})
			}

			//加速或者减速
			//点击到加速器边界内部
			var sleft_bol = touchX > speedAdd.x;
			var sright_bol = touchX < speedAdd.x + speedAdd.width;
			var stop_bol = touchY > speedAdd.y;
			var sbottom_bol = touchY < speedAdd.y + speedAdd.height;
			if(sleft_bol && sright_bol && stop_bol && sbottom_bol) {
				if(carState) {
					carState = false;
				} else {
					carState = true;
				}
			}

			event.preventDefault();
		})

		//这个setInterval()的需求是将4张红绿灯图片替换掉之后消失
		var hlds = 1;
		var hld1 = document.getElementById('hld1');
		//time_gameStart_countdown 是4s的游戏开始倒计时.
		timer_gameStart_countdown = setInterval(function() {
			hlds++;
			hld1.setAttribute('src', 'img/hld_' + hlds + '.png')
			if(hlds == 5) {
				clearInterval(timer_gameStart_countdown);
				//保证在红绿灯结束之后让其消失
				hld1.style.display = 'none';
				//保证起始线在红绿灯之后逐渐消失
			}
		}, 1000);
	</script>

</html>